<template>
  <common-crud ref="CommonCrudTest" :crudOptionProps="crudOptionProps" @listAfter="listAfter"></common-crud>
</template>

<script>
import commonCrud from "@/components/commonCrud/CommonCrud.vue"
import commonCrudCompontentTest from "@/views/util/commonCrudCompontentTest.vue"

export default {
  name: "CommonCrudTest",
  components: {commonCrud},
  data() {
    return {

      // 表配置
      crudOptionProps: {
        name: 'simpleCrud/index',
        apiPrefix: '/simplecrud',
        // 是否云原生
        functionTarget: 'sysDict',
        tableOption: {
          column: [{
            label: "姓名",
            prop: "name",
            search: true,
            formatter: (val, value, label) => {
              return value;
            }
          }, {
            label: "性别",
            prop: "sex",
            type: 'select',
            dicData: [{
              label: '男',
              value: 0
            }, {
              label: '女',
              value: 1
            }],
            search: true,
          }, {
            label: "图片",
            prop: "image",
            search: false,
            type: 'image',
            limit: 3,
            dictType: 'testImage'

          }, {
            label: "文件",
            prop: "file",
            search: false,
            type: 'upload',
            dictType: 'testfile'

          }
            , {
              label: "树形",
              prop: "tree",
              search: false,
              type: 'tree',
              dicUrl: '/simplecrud/tree'

            }, {
              label: "字典值",
              prop: "dict",
              search: true,
              type: 'dict',
              dictType: "testDict"

            },
            {
              label: "城市名称",
              prop: "cityCode",
              search: true,
              type: 'select',
              dicUrl: '/simplecrud/city',


            }, {
              label: "城市代码",
              prop: "city",
              type: 'quote',
              quoteType: 'cityCode',
            },


          ]
        },
        /**
         * type 类型
         * name 按钮名称
         * icon 按钮图标
         * mode 打开方式 一共三种「commd打开组件等,router路由跳转,switch状态切换」

         * switch{
         *   url:""     接口地址            必填
         *   prop:""    字段名称            必填
         *   value:""   接口地址            必填
         *   show:""    当prop值为X时候显示  必填
         * }
         * router{
         *   url:""     接口地址            必填
         *   prop:""    字段名称            必填
         *   value:""   接口地址            必填
         *   show:""    当prop值为X时候显示  必填
         * }
         *
         * commd{
         *   change:""  事件名称            必填
         * }
         * */
        buttonList: [
          // 菜单操作栏
          {
            menuType: "menu",
            name: "组件打开",
            icon: "View",
            mode: 'commd',
            component: '../../views/util/commonCrudCompontentTest',
            info: {
              prop: "dict",
              show: '1',
              // 组件标题
              title: ' 组件测试页面',
              //是否初始化init方法
              isInit: false
            }
          },
          {
            menuType: "menu",
            name: "弹框",
            icon: "View",
            mode: 'dialog',
            component: '../../views/util/commonCrudCompontentTest',
            info: {
              prop: "dict",
              show: '1',
              // 组件标题
              title: ' 组件弹窗页面',
              //是否初始化init方法
              isInit: false
            }
          }, {
            menuType: "menu",
            name: "打开外链",
            icon: "View",
            mode: 'openurl',
            info: {
              url: "http://baidu.com",
              // url中传参
              prop: "dict",
              // 是否打开新的页面
              blank: true,
            }

          },
          {
            menuType: "menu",
            name: "路由跳转",
            icon: "View",
            mode: 'router',
            info: {url: '/simpleCrud', props: 'kfc', value: '19090902212'}
          },
          {
            menuType: "menu", name: "上架", icon: "View", mode: 'switch', info: {
              url: "/test",
              prop: "dict",
              param: {cityCode: "$cityCode", dict: 1},
              show: '1',
              postType: 'post',
              successMsg: "修改状态成功",
              errorMsg: "修改状态失败"
            }
          },
          {
            menuType: "menu", name: "下架", icon: "View", mode: 'switch', info: {
              url: "/test",
              prop: "dict",
              param: {cityCode: "$cityCode", dict: 0},
              show: '0',
              postType: 'post',
              successMsg: "修改状态成功",
              errorMsg: "修改状态失败"
            }
          },

          // 表格上方按钮
          {
            menuType: "menuLeft",
            name: "组件打开",
            icon: "View",
            mode: 'commd',
            type: "success",
            component: '../../views/util/commonCrudCompontentTest',
            info: {
              prop: "dict",
              show: '1',
              // 组件标题
              title: ' 组件测试页面',
              //是否初始化init方法
              isInit: false
            }
          },
          {
            menuType: "menuLeft",
            name: "弹框",
            icon: "View",
            mode: 'dialog',
            component: '../../views/util/commonCrudCompontentTest',
            info: {
              prop: "dict",
              show: '1',
              // 组件标题
              title: ' 组件弹窗页面',
              //是否初始化init方法
              isInit: false
            }
          }, {
            menuType: "menuLeft",
            name: "打开外链",
            icon: "View",
            mode: 'openurl',
            info: {
              url: "http://baidu.com",
              // url中传参
              prop: "dict",
              // 是否打开新的页面
              blank: true,
            }

          },
          {
            menuType: "menuLeft",
            name: "路由跳转",
            icon: "View",
            mode: 'router',
            info: {url: '/simpleCrud', props: 'kfc', value: '19090902212'}
          },

        ]
      }

    }
  }, created() {
    console.log("commoncrud created")
  }, computed() {
    return {
      'search-reset': this.searchChange2,
    }
  }, methods: {
    listAfter(data) {
      console.log("listAfter2", data)
    },

    addBefore2(form) {

      alert(JSON.stringify(form))
      console.log("addBefore")
    },
    addAfter2(data) {

      console.log(data)
      alert(JSON.stringify(data))
    },
    updateBefore2(form) {
      alert(JSON.stringify(form))
    },

  }
}
</script>

<style scoped>

</style>
